<template>
    <el-card style="width: 100%;margin-bottom: 20px;">
       <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="">
                <el-input v-model="formInline.name" placeholder="职位名称" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onAddorEdit('create')">新增</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-card style="width: 100%">
        <el-table :data="list" style="width: 100%">
            <el-table-column fixed prop="name" label="职位名"/>
            <el-table-column prop="hospitalName" label="医院" />
            <el-table-column prop="number" label="招聘人数" />
            <el-table-column prop="jobPlace" label="工作地点" />
            <el-table-column prop="education" label="学历要求" />
            <el-table-column prop="jobRequire" label="任职要求" />
            <el-table-column prop="city" label="薪资">
                <template #default="scope">
                    {{scope.row.miniSalary}} ~ {{scope.row.maxSalary}}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="80">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="handleClick(scope.row.id)">
                    删除
                </el-button>
                <el-button link type="primary" size="small" @click="onAddorEdit('edit', scope.row.id)">编辑</el-button>
            </template>
            </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: flex-end;margin-top: 20px;">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                @current-change="handleCurrentChange"
            />
        </div>
    </el-card>
    <RecruitmentPositionForm ref="formRef" @success="onSubmit" />
</template>
<script setup>
import RecruitmentPositionForm from './subModule/RecruitmentPositionForm.vue'
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { RecruitmentPositionApi } from '@/api/hospital/recruitment.position'
const formInline = reactive({
  name: '',
  pageNo: 1,
  pageSize: 10
})
const total = ref(0);
const list = ref([]);

/** 添加/修改操作 */
const formRef = ref()

onMounted(()=>{
    onLoadData();
})

const onLoadData = () => {
    RecruitmentPositionApi.getRecruitmentPositionPage(formInline)
        .then(res=>{
            console.log('res', res);
            total.value = res.total;
            list.value = res.list;
        })
}

const onSubmit = () => {
    formInline.pageNo = 1;
    onLoadData();
}
const handleClick = (id) => {
  console.log('click')
  ElMessageBox.confirm(
    '确定删除吗?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {
        RecruitmentPositionApi.deleteRecruitmentPosition(id)
            .then(res=>{
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                });
                formInline.pageNo = 1;
                onLoadData();
            })
    })
}
const handleCurrentChange = (val) => {
    formInline.pageNo = val;
    onLoadData();
}

const onAddorEdit = (type, id) => {
    formRef.value.open(type, id)
}

</script>
